<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/3d.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>三维场景编辑器</title>
  <style>
    html,
    body {
      margin: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }

    #container {
      margin: 0 auto;
      width: 100%;
      height: 100%
    }

    #container:focus {
      outline: none;
    }

    #gui {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div>
    <button onclick="mainC.createPlatform()">新建平台层</button>
    <button onclick="mainC.addModel('./blue.glb','modelA',0.1)">导入模型A</button>
    <button onclick="mainC.addModel('./green.glb','modelA',0.1)">导入模型B</button>
    <button onclick="mainC.addDevice({depth:15,width:10,height:20,color:'grey',opacity:0.8,position: [0, 0, 0]})">导入白模</button>
    <button onclick="mainC.exportScene()">导出场景</button>
    <button onclick="mainC.addDataLine({width:2,color:'green',points:[]})">新增连线</button>
    <button onclick="mainC.exportFrameTree()">导出架构树</button>
  </div>
  <div style="position: relative;width: 100%;height: 100%;">
    <canvas id="container" tabindex="0"></canvas>
    <div id="gui"></div>
  </div>

  <!-- <script type="module" src="./src/bak/test.ts"> -->
  <!-- <script type="module" src="./src/main.ts"></script> -->
  <script type="module" src="./src/bak/test.ts"></script>
</body>

</html>